<template>
  <div class="container">
    <div class="one">OSB节点运行健康信息</div>
    <div class="two">
      <div
        v-for="(item, name, index) in propsData"
        :key="index"
        @click="clickTab(index)"
        :class="activeIndex === index ? 'active' : ''"
      >
        {{ name }}
      </div>
    </div>
    <div class="three" ref="oneBottomRight"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import * as echarts from 'echarts' // 工具类js，页面路径自己修改
import { fontSize } from '../../utils/tools'
export default {
  name: 'oneBottomRight',
  data () {
    return {
      activeIndex: 0,
      sliceIndex: 0,
      text: '',
      t: '',
      t2: '',
      propsData: {},
      oneBottomRight: '',
      dataList: []
    }
  },
  watch: {
    dataList: {
      handler (newVal, oldVal) {
        if (
          this.oneBottomRight !== null &&
          this.oneBottomRight !== '' &&
          this.oneBottomRight !== undefined
        ) {
          this.oneBottomRight.dispose() // 销毁
        }
        // console.log('获取的新值', newVal)
        if (newVal) {
          this.oneBottomRight = echarts.init(this.$refs.oneBottomRight)
          this.drawLine(this.oneBottomRight)
          this.$forceUpdate()
        }
      },
      deep: true
    },
    activeIndex: {
      immediate: true,
      deep: true,
      handler (val) {
        // if (val) {
        let m = Object.keys(this.propsData).length
        if (val === m) {
          this.activeIndex = 0
        } else {
          let asd = Object.keys(this.propsData)
          let gola = asd[val]
          // console.log('gola', gola)
          this.dataList = this.propsData[gola]
        }
      }
      // }
    },
    sliceIndex: {
      deep: true,
      immediate: true,
      handler (val) {
        let ms = Object.keys(this.initData.osbNodeRuningHealthyInfo).length
        // console.log('总数组的长度', ms)
        if (val === ms) {
          this.sliceIndex = 0
          let all = Object.keys(this.initData.osbNodeRuningHealthyInfo)
          this.dataList = this.initData.osbNodeRuningHealthyInfo[all[0]]
        }
        if (ms <= 5) {
          // console.log('总条数小于5个')
          this.propsData = this.initData.osbNodeRuningHealthyInfo
        } else {
          // console.log('总条数大于5个')
          let propKeys = Object.keys(this.initData.osbNodeRuningHealthyInfo)
          let msd
          if (this.sliceIndex <= 4) {
            msd = propKeys.slice(0, 5)
            // console.log(msd)
            this.propsData = {}
            msd.map(item => {
              this.propsData[item] = this.initData.osbNodeRuningHealthyInfo[
                item
              ]
            })
          } else {
            msd = propKeys.slice(this.sliceIndex - 4, this.sliceIndex + 1)
            // console.log(msd)
            this.propsData = {}
            msd.map(item => {
              this.propsData[item] = this.initData.osbNodeRuningHealthyInfo[
                item
              ]
              this.clickTab(4, 'as')
            })
          }
        }
      }
    }
  },
  computed: {
    ...mapState(['initData'])
  },
  created () {
    let that = this
    that.t = setInterval(function () {
      that.activeIndex++
    }, 2000)
    that.t2 = setInterval(function () {
      that.sliceIndex++
    }, 2000)
    let ms = Object.keys(this.initData.osbNodeRuningHealthyInfo).length
    if (ms <= 5) {
      // console.log('总条数小于5个')
      this.propsData = this.initData.osbNodeRuningHealthyInfo
    } else {
      // console.log('总条数大于5个')
      let propKeys = Object.keys(this.initData.osbNodeRuningHealthyInfo)
      let msd
      msd = propKeys.slice(0, 5)
      // console.log(msd)
      this.propsData = {}
      msd.map(item => {
        this.propsData[item] = this.initData.osbNodeRuningHealthyInfo[item]
      })
    }
    this.dataList = this.propsData.CPU
  },
  mounted () {
    // console.log(this.$refs.oneBottomRight)
    // this.setFontSize()
    this.oneBottomRight = echarts.init(this.$refs.oneBottomRight)
    this.drawLine(this.oneBottomRight)
    window.addEventListener('resize', () => {
      this.oneBottomRight.resize()
    })
    this.$forceUpdate()
  },
  destroyed () {
    clearInterval(this.t)
    clearInterval(this.t2)
  },
  methods: {
    clickTab (val, as) {
      console.log('触发了事件')
      let that = this
      // let m = Object.keys(that.propsData).length
      this.activeIndex = val
      let m
      m = this.sliceIndex
      this.sliceIndex = m
      clearInterval(this.t)
      clearInterval(this.t2)
      that.t = setInterval(function () {
        that.activeIndex++
      }, 2000)
      that.t2 = setInterval(function () {
        that.sliceIndex++
      }, 2000)

      if (as === 'as') {
        let asd = Object.keys(this.propsData)
        let gola = asd[val]
        this.dataList = this.propsData[gola]
      }
    },
    drawLine (name) {
      let myChart = name
      let option
      let list = this.dataList
      let yName = list.map(item => item.ip)
      let xData = list.map(item => item.value)
      let barWidth = fontSize(25)

      function formatColor (sData) {
        var sss = []
        sData.forEach(function (item, i) {
          let colors
          if (i <= 2) {
            colors = 'red'
          } else if (i > 2 && i <= 6) {
            colors = 'yellow'
          } else {
            colors = 'green'
          }
          let itemStyle = {
            color: colors
          }
          sss.push({
            value: item,
            itemStyle: itemStyle
          })
        })
        return sss
      }
      option = {
        // backgroundColor: 'balck',
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          min: 0,
          max: 100
        },
        grid: {
          containLabel: true,
          left: '2%',
          top: 0,
          right: '1%',
          bottom: 0
        },
        yAxis: [
          {
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: fontSize(25),
                color: '#fff'
              }
            },
            data: yName
          }
        ],
        series: [
          {
            // 内
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#042E5D'
            },
            label: {
              show: true,
              position: 'right',
              fontSize: fontSize(15),
              formatter: '{c}%'
            },
            barWidth,
            data: formatColor(xData),
            z: 1,
            animationEasing: 'elasticOut'
          },

          {
            // 背景
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'none',
            // symbolSize: [6, barWidth],
            itemStyle: {
              normal: {
                color: 'transition'
              }
            },
            data: xData,
            z: 0,
            animationEasing: 'elasticOut'
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#042E5D'
            },
            symbolRepeat: 'fixed',
            symbolMargin: fontSize(2),
            symbol: 'Rect',
            symbolClip: true,
            symbolSize: [fontSize(2), barWidth],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            data: list,
            z: 2,
            animationEasing: 'elasticOut'
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  // width: 100%;
  height: 100%;
  box-sizing: border-box;
  // border: 1px solid red;
  // margin-bottom: 70px;
  padding-left: 3%;
  padding-right: 4%;
  display: flex;
  flex-direction: column;
  background: url('../../assets/image/thin.png') no-repeat 0px 0px;
  background-size: 100% 100%;
  // background-color: rgba(0, 0, 0, 0.3);
  .one {
    width: 750px;
    height: 110px;
    display: flex;
    justify-content: start;
    // flex-direction: column;
    align-items: center;
    padding-left: 15%;
    font-size: 35px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #66e2e2;
    background: url('../../assets/image/thinTipbg.png') no-repeat 0px 0px;
    background-size: 100% 100%;
  }
  .two {
    width: 100%;
    height: 63px;
    margin-top: 25px;
    margin-bottom: 25px;
    box-sizing: border-box;
    display: flex;
    font-size: 25px;
    justify-content: space-evenly;
    align-items: center;
    // background: red;
    div {
      width: 126px;
      height: 63px;
      // border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #acd7e8;
      background: url('../../assets/image/notSelected.png') no-repeat 0px 0px;
      background-size: 100% 100%;
      &.active {
        background: url('../../assets/image/selected.png') no-repeat 0px 0px;
        background-size: 100% 100%;
        color: #51f3f1;
      }
    }
  }
  .three {
    // height: 86%;
    height: 665px;
    // background: #000;
  }
}
</style>
